<html>
<head><style>

  option img
  {
    margin:2px;
    min-width:20px;
    min-height:20px;
    foreground-position:50% 50%;
    foreground-size:11px 11px;
    foreground-repeat:no-repeat;
    vertical-align:middle;
  }
  
  option img:hover { color:red; }
  
  widget
  {
    width:max-intrinsic;
    height:*;
  }
</style></head>

<body style="flow:horizontal">

<widget|select>
  <option><img src="stock:arrow-left">stock:arrow-left</option>
  <option><img src="stock:arrow-right">stock:arrow-right</option>
  <option><img src="stock:arrow-down">stock:arrow-down</option>
  <option><img src="stock:arrow-up">stock:arrow-up</option>
  <option><img src="stock:arrow-ne">stock:arrow-ne</option>
  <option><img src="stock:arrow-se">stock:arrow-se</option>
  <option><img src="stock:arrow-sw">stock:arrow-sw</option>
  <option><img src="stock:arrow-nw">stock:arrow-nw</option>
  <option><img src="stock:arrow-n">stock:arrow-n</option>
  <option><img src="stock:arrow-s">stock:arrow-s</option>
  <option><img src="stock:arrow-w">stock:arrow-w</option>
  <option><img src="stock:arrow-e">stock:arrow-e</option>
  <option><img src="stock:checkmark">stock:checkmark</option>
  <option><img src="stock:arrow-left-hollow">stock:arrow-left-hollow</option>
  <option><img src="stock:arrow-right-hollow">stock:arrow-right-hollow</option>
  <option><img src="stock:arrow-down-hollow">stock:arrow-down-hollow</option>
  <option><img src="stock:arrow-up-hollow">stock:arrow-up-hollow</option>
  <option><img src="stock:arrow-ne-hollow">stock:arrow-ne-hollow</option>
  <option><img src="stock:arrow-se-hollow">stock:arrow-se-hollow</option>
  <option><img src="stock:arrow-sw-hollow">stock:arrow-sw-hollow</option>
  <option><img src="stock:arrow-nw-hollow">stock:arrow-nw-hollow</option>
  <option><img src="stock:arrow-n-hollow">stock:arrow-n-hollow</option>
  <option><img src="stock:arrow-s-hollow">stock:arrow-s-hollow</option>
  <option><img src="stock:arrow-w-hollow">stock:arrow-w-hollow</option>
  <option><img src="stock:arrow-e-hollow">stock:arrow-e-hollow</option>
  <option><img src="stock:checkmark-hollow">stock:checkmark-hollow</option>
  <option><img src="stock:cross-x"> stock:cross-x            </option>
  <option><img src="stock:cross-x-hollow"> stock:cross-x-hollow</option>
  
  <option><img src="stock:disk"> stock:disk            </option>
  <option><img src="stock:circle"> stock:circle</option>
  
  <option><img src="stock:frame"> stock:frame</option>
  <option><img src="stock:block"> stock:block</option>
  
  <option><img src="stock:chevron-right"> stock:chevron-right</option>
  <option><img src="stock:chevron-right-hollow"> stock:chevron-right-hollow</option>
  <option><img src="stock:chevron-left"> stock:chevron-left</option>
  <option><img src="stock:chevron-left-hollow"> stock:chevron-left-hollow</option>

  <option><img src="stock:chevron-up"> stock:chevron-up</option>
  <option><img src="stock:chevron-up-hollow"> stock:chevron-up-hollow</option>
  <option><img src="stock:chevron-down"> stock:chevron-down</option>
  <option><img src="stock:chevron-down-hollow"> stock:chevron-down-hollow</option>
  
</widget>


<div>
<p>Theme images are always available in Sciter with "stock" URL schema.</p>
<p>The images are drawn using value of <code>color</code> CSS property.</p>

</div>
</body>
</html>

